<template>
    <div class="w-100 padr-10">
        <div>
            <!-- <el-checkbox label="展开/折叠" v-model="isExp" @change="onChangeExp"></el-checkbox>
            <el-checkbox label="全选/全不选" v-model="isSelectAll" @change="onChangeSelectAll"></el-checkbox> -->

            <el-button type="primary" @click="onChangeExp" size="small">展开/折叠</el-button>
            <el-button type="warning" @click="onChangeSelectAll" size="small">全选/全不选</el-button>
        </div>
        <div class="RolePermissionConfig">
            <el-tree ref="RolePermissionConfigTreeRef" :data="data" show-checkbox node-key="autoID" @check="onCheck" :default-expand-all="false" :expand-on-click-node="false" :check-on-click-node="true" :props="{ class: customNodeClass, label: 'name' }" />
        </div>
    </div>
</template>

<script lang="ts" setup>
const props = defineProps({
    //v-model
    modelValue: {
        type: Array<any>,
        default: () => [],
    },
});

//接收父组件的传值
const rowAutoID = inject("rowAutoID") as Ref<number | null>;

const customNodeClass = (data: any) => {
    return data.lv;
};

const data = ref<any>();
const isExp = ref(false);
const isSelectAll = ref(false);

const RolePermissionConfigTreeRef = ref(null);

onMounted(() => {
    let _roleID = 0;

    if (!Gx.IsEmpty(rowAutoID.value)) {
        _roleID = rowAutoID.value;
    }

    App.CallApi(Api.Permission.GetTreePermission, {
        success: (res) => {
            data.value = res;
        },
    });
});

//监听
watch(
    () => props.modelValue,
    (newVal, oldVal) => {
        if (newVal && newVal.length > 0) {
            RolePermissionConfigTreeRef.value.setCheckedKeys(newVal);
        }
    }
);

//改变事件
const onCheck = (data: any, checkStatus: any) => {
    emits("update:modelValue", checkStatus.checkedKeys);
};

//展开、折叠
const onChangeExp = () => {
    isExp.value = !isExp.value; //button用

    for (let i = 0; i < RolePermissionConfigTreeRef.value.store.root.childNodes.length; i++) {
        const item = RolePermissionConfigTreeRef.value.store.root.childNodes[i];
        item.expanded = isExp.value;

        for (let j = 0; j < item.childNodes.length; j++) {
            const jtem = item.childNodes[j];
            jtem.expanded = isExp.value;
        }
    }
};

//全选、全不选
const onChangeSelectAll = () => {
    isSelectAll.value = !isSelectAll.value; //button用

    if (isSelectAll.value == true) {
        var copy = Gx.DeepCopy(data.value);

        let ids = Gx.Tree2List(copy).map((x) => {
            return x.autoID;
        });

        RolePermissionConfigTreeRef.value.setCheckedKeys(ids);
        emits("update:modelValue", ids);
    } else {
        RolePermissionConfigTreeRef.value.setCheckedKeys([]);
        emits("update:modelValue", []);
    }
};

const emits = defineEmits(["update:modelValue"]);
</script>

<style lang="scss" scoped>
.RolePermissionConfig {
    width: 100%;
    height: 350px;
    overflow-y: auto;
    border: 1px solid #dcdfe6;
    padding-top: 10px;
    padding-left: 10px;
}

:deep(.lv1 > .el-tree-node__content) {
    margin-bottom: 10px;

    .el-tree-node__label {
        font-size: 18px;
    }
}

:deep(.lv2 > .el-tree-node__content > .el-tree-node__label) {
    font-size: 16px;
}

:deep(.lv2) {
    margin-bottom: 10px;
}

:deep(.lv2 .el-tree-node__children) {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    font-size: 14px;

    .el-tree-node {
        width: 24%;

        .el-tree-node__label {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

// .el-tree-node.is-expanded>.el-tree-node__children {
//     display: flex !important;
// }
</style>
